<template>
	<view>
		<view
			style="border-bottom: 1px solid #f3f4f6;position: fixed;top: 0;width: 100%;background-color: #fff;z-index:9999;height: 100rpx;">
			<uv-tabs :list="list" @click="click" :scrollable="false" lineColor="#7859ff" :activeStyle="{
			color: '#7859ff',
			fontWeight: 'bold',
    	}" :inactiveStyle="{
			color: '#606266',
			transform: 'scale(1)'
		}"></uv-tabs>
		</view>
		<view style="margin-top: 120rpx;">
			<view v-if="dataList.length > 0">
				<view
					style="margin: 20rpx; background-color: #fff;border-radius: 10rpx;box-shadow: 0 0 10rpx 10rpx #f3f4f6;padding: 14rpx 20rpx;"
					v-for="item in dataList">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 28rpx;font-weight: 400;">{{item.outTradeNo}}</view>
						<view style="font-size: 26rpx;color: #ff9900;" v-if="item.status == 0">待支付</view>
						<view style="font-size: 26rpx;color: #19be6b;" v-if="item.status == 1">已支付</view>
						<view style="font-size: 26rpx;color: #82848a;" v-if="item.status == 3">已退款</view>
						<view style="font-size: 26rpx;color: #82848a;" v-if="item.status == 4">待审核</view>
					</view>
					<view style="margin: 20rpx 0;display: flex;align-items: center;">
						<view style="width: 20%;">
							<image :src="item.photo_url" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
							</image>
						</view>
						<view style="margin-left: 10rpx;">
							<view style="font-size: 28rpx;font-weight: 500;">{{item.goodsName}}</view>
							<view style="font-size: 24rpx;color: #82848a;margin-top: 10rpx;">{{item.goodsTime}}
							</view>
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 26rpx;">合计：<text
								style="font-size: 32rpx;font-weight: bold;font-style: italic;color: #fa3534;margin-top: 10rpx;text-align: right;">￥{{parseFloat(item.totalFee * 0.01).toFixed(2)}}</text>
						</view>
						<view v-if="item.status == 1"
							style="background-color: #dd6161;padding: 6rpx 20rpx;border-radius: 10rpx;color: #fff;"
							@click="cancel(item)">取消报名</view>
					</view>
				</view>
				<uv-load-more :status="loadStatus" />
			</view>
			<view v-if="dataList.length == 0">
				<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png" text="暂无报名赛事"></uv-empty>
			</view>
		</view>
		<uni-pay ref="pay"></uni-pay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				list: [{
						name: '全部',
						id: '10'
					}, {
						name: '已付款',
						id: 1
					},
					// {
					// 	name: '待付款',
					// 	id: 0
					// }, 
					{
						name: '待审核',
						id: 4
					}, {
						name: '已退款',
						id: 3
					}
				],
				status: '10',
				loadStatus: 'nomore',
				pageIndex: 1,
				pageSize: 10,
				hasMore: true
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			click(e) {
				console.log(e)
				this.status = e.id
				this.dataList = []
				this.pageIndex = 1
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				let filter = {}
				console.log(this.status == Number(0))
				if (this.status == '10') {
					filter.openId = uni.getStorageSync('openid')
				} else {
					filter.status = this.status
					filter.openId = uni.getStorageSync('openid')
				}
				uniCloud.callFunction({
					name: 'order',
					data: {
						dbName: 'order',
						type: 'get',
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						filter: filter
					},
					success: res => {
						console.log(res)
						this.dataList = this.dataList.concat(res.result.data)
						if (res.result.hasMore) {
							this.hasMore = res.result.hasMore
							this.loadStatus = 'more'
						} else {
							this.hasMore = res.result.hasMore
							this.loadStatus = 'nomore'
						}
						uni.hideLoading()
					}
				})
			},
			// 取消报名
			cancel(item) {
				// var diff = Math.abs(new Date().getTime() - item.pay_date);
				// // 将差值转换为小时
				// var hours = Math.floor(diff / (1000 * 60 * 60));
				// if (hours <= 2) {
				// 	uni.showToast({
				// 		title: '两小时后可取消！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				uni.showModal({
					title: '确定要取消？',
					content: '请等待管理员审核，通过后费用将原路返回！',
					success: async res => {
						if (res.confirm) {
							uni.showLoading({
								title: "取消中"
							})
							item.status = 4
							uniCloud.callFunction({
								name: 'order',
								data: {
									dbName: 'order',
									type: 'update',
									datas: item
								},
								success: async ress => {
									await this.updateCom(item)
									uni.hideLoading()
									uni.showToast({
										title: '取消成功，请等待审核！',
										icon: "none"
									});
								}
							})
							// let res = await this.$refs.pay.refund({
							// 	out_trade_no: item.outTradeNo, // 插件支付单号
							// });
							// if (res) {

							// 	return

							// }
						}
					}
				})
			},
			// 取消报名人数减一
			updateCom(item) {
				uniCloud.callFunction({
					name: 'enrollment',
					data: {
						id: item.goodsId,
						type: 'update',
						dbName: 'competition',
						typeAction: 'reduce'
					},
					success: res => {
						console.log('成功', res)
					}
				})
			},
			// 触底
			onReachBottom() {
				if (!this.hasMore) return;
				this.loadStatus = 'loading';
				this.pageIndex = ++this.pageIndex;
				this.getList()
			}
		}
	}
</script>

<style>
</style>